<template>
  <div class="contentWrapper">
    <!--文字消息-->
    <TextComponent />
    <div class="imgContent" v-if="moment.type != 0">
      <!--图片消息-->
      <ImageComponent v-if="moment.type == 1" />
      <!--视频消息-->
      <VideoComponent v-if="moment.type == 2" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { inject } from 'vue'
import ImageComponent from './ImageComponent.vue'
import VideoComponent from './VideoComponent.vue'
import TextComponent from './TextComponent.vue'
const props = defineProps({
  moment: {
    type: Object,
    default: () => {}
  }
})
const moment = inject('moment', {})
</script>
<style lang="less" scoped>
.contentWrapper {
  margin-top: 5px;
  .imgContent {
    width: 100%;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 2px;
  }
}
</style>
